<template>
  <div
    class="widget-bottombar relative align-start justify-between color-white no-select text-center full-width"
  >
    <div class="widget-bottombar-left flex justify-end floatL on-bg">
      <div
        class="widget-bottombar-left-button widget-bottombar-button text-center relative title-4 pointer flex align-center justify-start"
        @click="$router.push({ path })"
        v-for="{ path, icon, title } in siderLeftItem"
        :key="path"
        :class="{ active: $route.path === path }"
      >
        <span v-show="icon" :class="icon" />{{ title }}
      </div>
    </div>
    <!-- <div
      class="widget-bottombar-center text-center floatL"
      @click="$router.push({ path })"
      v-for="{ path, icon, title } in siderCenterItem"
      :key="path"
      :class="{ active: $route.path === path }"
    >
      <div class="widget-bottombar-center-button">
        <span v-show="icon" :class="icon" />{{ title }}
      </div>
    </div> -->
    <div class="widget-bottombar-right flex floatL justify-start">
      <div
        class="widget-bottombar-right-button text-center widget-bottombar-button flex title-4 align-center pointer"
        @click="$router.push({ path })"
        v-for="{ path, icon, title } in siderRightItem"
        :key="path"
        :class="{ active: $route.path === path }"
      >
        <span v-show="icon" :class="icon" />{{ title }}
      </div>
    </div>

    <div class="widget-bottombar-topshow">
      <i
        class="iconfont el-moduanzuoyouzhankai_o pointer black-bg color-white button-primary title-4 hover-active"
        style="display: block; font-size: 14px; margin-bottom: 4px"
        @click="$emit('leftRightControl')"
      ></i>

      <i
        class="el-icon-caret-bottom pointer black-bg color-white button-primary title-4 hover-active"
        style="font-size: 14px"
        @click="$emit('bottombarControl')"
      ></i>
    </div>
  </div>
</template>

<script>
import { title } from "@/configurations";
import { urls } from "@/api/mock";
import { mapGetters } from "vuex";
import * as routes from "@/router/views";
import { translateTreeToData1 } from "@/utils/parentSon";
export default {
  name: "Widgetbottombar",
  data() {
    const that = this;
    return {
      title,
      url: "",
    };
  },
  created() {
    urls().then(({ data }) => {
      this.url = data.adminUrl;
    });
  },
  mounted() {},
  computed: {
    ...mapGetters(["sidebarMap"]),
    nowRoutes() {
      return translateTreeToData1(this.$router.options.routes);
    },
    sidebarItem() {
      return Object.values(routes)
        .filter((route) => route?.meta?.show)
        .map((route) => {
          return {
            icon: route.meta.icon,
            title: route.meta.title,
            path: route.path,
          };
        })
        .reverse();
    },
    siderLeftItem() {
      return Object.values(routes)
        .filter((route) => route?.meta?.show && route?.meta.center == "left")
        .map((route) => {
          return {
            icon: route.meta.icon,
            title: route.meta.title,
            path: route.path,
          };
        })
        .reverse();
    },
    siderCenterItem() {
      return Object.values(routes)
        .filter((route) => route?.meta?.show && route?.meta.center == "center")
        .map((route) => {
          return {
            icon: route.meta.icon,
            title: route.meta.title,
            path: route.path,
          };
        })
        .reverse();
    },
    siderRightItem() {
      return Object.values(routes)
        .filter((route) => route?.meta?.show && route?.meta.center == "right")
        .map((route) => {
          return {
            icon: route.meta.icon,
            title: route.meta.title,
            path: route.path,
          };
        })
        .reverse();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/backgrounds.scss";
.widget-bottombar {
  // bottom: 20px;
  white-space: nowrap;
  overflow: hidden;
  clear: both;
  display: inline-block;
  & > div {
    flex-shrink: 0;
  }
  &:hover {
    .widget-bottombar-topshow {
      bottom: 0;
    }
  }
  .widget-bottombar-center {
    padding: 20px 0 12px 0;
    margin-left: -10px;
    margin-right: -10px;
    .widget-bottombar-center-button {
      width: 140px;
      height: 50px;
      border: 1px solid $active-light;
      box-shadow: 0 0 15px $active-light inset;
      //   background: #3580c1;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
    }
  }
  .widget-bottombar-button {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 140px;
    line-height: 50px;
    margin-right: 10px;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: $background-black;
      transition: all 3s;
      z-index: -1;
      transform: skewX(-45deg);
      box-shadow: 0 0 15px $active inset;
      border: 1px solid $active-light;
    }
    &:hover::after {
      background-color: $active;
    }
  }

  .widget-bottombar-left {
    padding: 20px 0 6px 0;
    width: 47%;
    .widget-bottombar-left-button {
      width: 18%;
      position: relative;
      display: inline-block;
      margin-right: 10px;
    }
    .widget-bottombar-left-button:last-child {
      margin-right: 0;
    }
    .active::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid $active inset;
      background-color: $active;
      transition: all 3s;
      z-index: -1;
      transform: skewX(-45deg);
    }
  }
  .widget-bottombar-topshow {
    transition: all ease 0.5s;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -110%;
  }
  .widget-bottombar-right {
    padding: 20px 0 12px 0;
    position: absolute;
    right: 0;
    width: 47%;
    .widget-bottombar-button {
      position: relative;
      display: inline-block;
      height: 50px;
      line-height: 50px;
      margin-right: 10px;
      width: 18%;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: $background-black;
        transition: all 3s;
        z-index: -1;
        transform: skewX(45deg);
        border: 1px solid $active-light;
      }
      &:hover::after {
        background-color: $active;
      }
    }
    .active::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid $active;
      background-color: $active;
      transition: all 3s;
      z-index: -1;
      transform: skewX(45deg);
    }
    .widget-bottombar-right-button {
      margin-right: 10px;
    }
  }
}
</style>
